<template>
    <div class="mod-role">
        <el-card class="box-card">
            <el-form :inline="true" :model="dataForm" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="dataForm.username" clearable placeholder="用户名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="openDialog">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="dataList" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="userId" label="ID" width="150">
                </el-table-column>
                <el-table-column prop="username" label="用户名称" width="180">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="280">
                </el-table-column>
                <el-table-column prop="mobile" label="电话" width="280">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="280">
                    <template slot-scope="scope">
                        <span>{{ scope.row.status == 1 ? '正常' : "禁用" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
                            <span>{{ scope.row.status == 0 ? '启用' : "禁用" }}</span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                :current-page="pageIndex" :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper" style="margin-top:30px;">
            </el-pagination>
        </el-card>
        <el-dialog :title="this.dataDialogForm.userId != 0 ? '更新用户' : '新增用户'" width="35%"
            :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="dataDialogForm" :rules="rules" ref="ruleForm">
                <el-form-item label="账号" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="dataDialogForm.username" placeholder="账号" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                    <el-input type="password" v-model="dataDialogForm.password" placeholder="描述信息"
                        style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                    <el-input v-model="dataDialogForm.email" placeholder="邮箱" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile">
                    <el-input v-model="dataDialogForm.mobile" placeholder="电话" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="mobile">
                    <el-select v-model="dataDialogForm.status" placeholder="状态">
                        <el-option v-for="item in statusList" :label="item.label" :value="item.value" :key="item.value">
                        </el-option>

                    </el-select> </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmitFormData('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'SysUser',
    data() {
        var checkUserName = (rule, value, callback) => {
            if (this.dataDialogForm.userId !== 0) {
                callback();
            } else if (value === '') {
                callback(new Error('请输入账号'));
            } else {
                //重命名校验
                this.$http.get("/sys/sysUser/checkUserName?username=" + value).then((res) => {
                    if (res.data.data === 'fail') {
                        //可以使用
                        callback();
                    } else {
                        callback(new Error('账号重复'));
                    }

                })
            }
        };
        return {
            dataForm: {
                username: "",
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 5,
            totalPage: 0,
            dataListLoading: false,
            formLabelWidth: '120px',
            dialogFormVisible: false,
            dialogFormSubmitVisible: false,
            dataDialogForm: {
                userId: 0,
                username: "",
                status: 1,
            },
            statusList: [{
                label: '激活',
                value: 1
            }, {
                label: '禁用',
                value: 0
            }],

            rules: {
                username: [
                    { validator: checkUserName, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    }, methods: {
        sizeChangeHandle(val) {
            // alert(val)
            this.pageSize = val;
            this.pageIndex = 1;
            this.getDataList();
        },
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getDataList();
        },
        getDataList() {
            if (this.dataListLoading) {
                return;
            }
            this.dataListLoading = true;
            const params = {
                params: {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    username: this.dataForm.username
                }
            }
            this.$http.get("/sys/sysUser/list", params).then((res) => {
                // console.log(res.data)
                this.dataList = res.data.data.list;
                this.totalPage = res.data.data.totalCount;
                this.dataListLoading = false;
            })
        }, openDialog() {
            this.dialogFormVisible = true;
            this.dataDialogForm.userId = 0;
            this.dataDialogForm.username = '';
            this.dataDialogForm.email = '';
            this.dataDialogForm.mobile = '';
        }, closeDialog() {
            //清空添加的表单数据
            this.dataDialogForm = {
                userId: 0,
                username: "",
                email: "",
            }
        },
        handleSubmitFormData(formName) {
            this.updateRole(formName);
        }, updateRole(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.dialogFormSubmitVisible) {
                        return
                    }
                    this.dialogFormSubmitVisible = true
                    this.$http.post('/sys/sysUser/save', this.dataDialogForm).then((res) => {
                        this.dialogFormVisible = false;
                        //清空添加的表单数据
                        this.dataDialogForm = {
                            userId: 0,
                            username: "",
                            email: "",
                        },
                            this.dialogFormSubmitVisible = false;
                        //刷新数据
                        this.getDataList();
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }, mounted() {
        this.getDataList();
    }
}
</script>